<template>
    <div>
        <el-form ref="form" :model="flow" label-width="120px">
        <div v-if="statu">
                <el-form-item label="流程名称："  >
                    <el-input v-model="flow.flowName" @blur="qc" style="width: 218px"></el-input>
                </el-form-item>
                <el-form-item label="流程描述："  >
                    <el-input v-model="flow.flowRemark"  style="width: 218px"></el-input>
                </el-form-item>
                <el-form-item label="所属板块：">
                    <el-select v-model="flow.moduleId"   placeholder="请选择所属板块">
                        <el-option v-for="authority in authoritys" :key="authority.id" :value="authority.id" :label="authority.authorityName"></el-option>
                    </el-select>
                </el-form-item>
                <div v-for="(node,index) in nodeList" :key="node.seq">
                    <el-form-item :label="'审批流程第'+(index+1)+'步：'">
                        <el-select v-model="node.flowNodeRole"   @change="changeSelect(index)"  placeholder="请选择角色">
                            <el-option v-for="role in roles" :key="role.id" :value="role.id" :label="role.roleName"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
        </div>
        <div v-if="statu2">
            <el-form-item label="流程名称："  >
                <el-input v-model="flow.flowName" @blur="qc" style="width: 218px"></el-input>
            </el-form-item>
            <el-form-item label="流程描述："  >
                <el-input v-model="flow.flowRemark"  style="width: 218px"></el-input>
            </el-form-item>
            <el-form-item label="所属板块：">
                <el-select v-model="flow.moduleId"   placeholder="请选择所属板块">
                    <el-option v-for="authority in authoritys" :key="authority.id" :value="authority.id" :label="authority.authorityName"></el-option>
                </el-select>
            </el-form-item>
            <div v-for="(node,index) in nodeList" :key="node.seq">
                <el-form-item :label="'审批流程第'+(index+1)+'步：'">
                    <el-select v-model="node.flowNodeRole"   @change="changeSelect(index)"  placeholder="请选择角色">
                        <el-option v-for="role in roles" :key="role.id" :value="role.id" :label="role.roleName"></el-option>
                    </el-select>
                </el-form-item>
            </div>
        </div>
            <el-form-item>
                <el-button @click="addRow">添加节点</el-button>
                <el-button type="danger" @click="delRow">删除节点</el-button>
                <el-button type="primary" @click="addOrupdate">确认修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    import Management_anthorityService from '../../../model/mfy/system_user/Management_anthorityService.js'
    var  management_anthorityService =Management_anthorityService.getInstance();

    import SystemRoleService from '../../../model/mfy/system_user/SystemRoleService.js'
    var  systemRoleService =SystemRoleService.getInstance();

    import FlowService  from '../../../model/mfy/flow/FlowService.js'
    var flowService=FlowService.getInstance();


    export default {
        name: "AddOrUpdate_flow",
        props:['status','id','moduleId'],
        data(){
            return{
                statu:this.status=='添加'?true:false,
                statu2:this.status=='修改'?true:false,
                ids:this.id,
                flow:{},
                authoritys:[],
                roles:[],
                moduleid:this.moduleId,
                nodeList:[
                    {
                        flowNodeRole:'',
                        seq:2
                    }
                ]
            }
        },
        created(){
            this.AuthorityList();
            this.RoleList();
        },
        methods:{
            AuthorityList(){
                management_anthorityService.list().then(response=>{
                    this.authoritys=response.data.data
                })
            },

            qc(){
                flowService.qc(this.flow.flowName).then(response=>{
                    if(response.data.data!=null){
                        this.$message.error("流程名称不能重复");
                        this.flow.flowName='';
                        return;
                    }
                })
            },
            RoleList(){

                if(this.status=='修改'){

                    flowService.init(this.ids,this.moduleid).then(this.$axios.spread((response1,response2,response3)=> {
                        this.flow=response1.data.data
                        this.authoritys=response2.data.data
                        // this.nodeList=
                        // this.nodeList.push({
                        //     flowNodeRole:'',
                        //     seq:2
                        // })
                        var jd =[]
                        for(var i =1;i<response3.data.data.length;i++){
                            jd.push({
                                flowNodeRole:response3.data.data[i].flowNodeRole,
                                seq:response3.data.data[i].seq
                            })
                        }
                        this.nodeList=jd;
                    }))
                    // flowService.init().

                    // flowService.getOne(this.ids).then(response=>{
                    //     this.flow=response.data.data
                    // })
                    // flow_nodeService.getSon(this.ids).then(response=>{
                    //    console.log(response.data.data)
                    // })
                }

                systemRoleService.list2().then(response=>{
                    this.roles=response.data.data
                })
            },


            addRow(){
                this.nodeList.push({
                    flowNodeRole:'',
                    seq:this.nodeList[this.nodeList.length-1].seq+1
                })
            },
            delRow(){
                if(this.nodeList.length<=1){
                    this.$message.error("已是最后一个节点!")
                    return;
                }
                this.nodeList.pop();
            },
            changeSelect(index){
                const flowNode = this.nodeList[index]
                this.nodeList.forEach(item => {
                    if(item.seq!=flowNode.seq && item.flowNodeRole==flowNode.flowNodeRole){
                        this.$message.error("该节点已存在!")
                        flowNode.flowNodeRole = '';
                        return;
                    }
                })
            },

            addOrupdate(){
                if(this.flow.flowName==null || this.flow.flowName == "" ){
                    this.$message.error("流程名不能为空!")
                    return;
                }
                if(this.flow.moduleId==null || this.flow.moduleId == "" ){
                    this.$message.error("所属模块不能为空!")
                    return;
                }

                this.nodeList.forEach(item => {
                    if(item.flowNodeRole == "" || item.flowNodeRole==null ){
                        this.$message.error("节点不能为空!")
                        return;
                    }
                })
                var vo = {};
                vo.flow=this.flow
                vo.nodeList=this.nodeList;
                console.log(vo)
                flowService.save(vo).then(()=>{
                    this.flow={};
                    this.nodeList=[]
                    this.nodeList.push({
                        flowNodeRole:'',
                        seq:2
                    })
                    this.$emit("refresh")

                })

            }
        },
        watch:{

        },

    }
</script>

<style scoped>

</style>
